<script lang="ts" setup>
import { defineProps } from 'vue'
import type { PropType } from 'vue'
import type { DataOverObject } from '@/types/interface'

defineProps({
    item: {
        type: Object as PropType<DataOverObject>,
        defult: {}
    }
})
</script>

<template>
    <div class="row-normal-start">
        <div class="left-block row-normal-start">
            <span class="left-line" :style="{'background-color':`rgb(${item?.color})`}"></span>
            <span class="left-small-block full-w-0 full-h m-l-2" style="position: relative;">
                <span class="left-small-center-block" :style="{'background':`linear-gradient(to right, rgba(${ item?.isSynBackgroudColor ? item?.backgroudColor : '49,66,152' },1), rgba(${ item?.isSynBackgroudColor ? item?.backgroudColor : '49,66,152' },.3))`}">
                    <!-- 填充图片 -->
                </span>
                <span class="left-small-corner-block" :style="{'background-color':`rgb(${item?.color})`}" style="position: absolute;top:0;left:0;z-index: 9;"></span>
                <span class="left-small-corner-block" :style="{'background-color':`rgb(${item?.color})`}" style="position: absolute;bottom:0;left:0;z-index: 9;"></span>
            </span>
        </div>
        <div class="column-normal-align-start m-l-10 font-size-12 flex-grow-1">
            <span class="left-cell-title-color">{{ item?.title }}</span>
            <span class="m-t-5" :style="{'color':`rgb(${ item?.isSynTextColor ? item?.color : '255,255,255'})`}">
                <span>{{ item?.value }}</span>
                <span>{{ ' ' + item?.unit }}</span>
            </span>
        </div>
    </div>
</template>   

<style lang="stylus" scoped>
@import "stylus-px2rem";
@import url('@/css/normal.styl');

$left-block-length = 28px
.left-block
    width $left-block-length
    height $left-block-length

.left-line
    width 1.2px
    height 70%

.left-small-block
    height 100%

$leftSmallCornerBlockLength = 4px
.left-small-corner-block
    width $leftSmallCornerBlockLength
    height $leftSmallCornerBlockLength

$leftSmallCenterBlockSep = 1.4px
.left-small-center-block
    display inline-block
    position absolute
    margin-top $leftSmallCenterBlockSep
    margin-left $leftSmallCenterBlockSep
    width (100% - ($leftSmallCenterBlockSep))
    height (100% - ($leftSmallCenterBlockSep * 8))
    z-index 99
    background: linear-gradient(to right, rgb(49,66,152), rgba(49,66,152,.3));

</style>